<!--我的音乐-->
<template>
  <div id="my-music">

    <!-- 未登录时显示的组件-->
    <div class="no-login" v-if="!this.$store.state.isLogin">
      <div>
        <el-image :src="nlImg" style="width: 300px; height: 300px" fit="fill"></el-image>
      </div>

      <div class="text">
        <h1>登录微享音乐</h1>
        <p>查看并管理你的音乐，方便随时地收听</p>
<!--        <router-link class="clbg" to="/login" tag="el-button">立即登录</router-link>-->
        <el-button type="primary" @click="goLogin">立即登录</el-button>
      </div>
    </div>

    <!-- 登录时显示的组件-->
    <div class="login" v-else>
      <!-- 页面左侧-->
      <div class="left">
        <div>
          <p>
            <span @click="isRotate = !isRotate"><i :class="{'rotate': isRotate}" class="el-icon-caret-right"></i>创建的歌单（1）</span>
            <el-button class="edit" type="primary" size="mini" icon="el-icon-edit" round
                @click="dialogFormVisible = true"></el-button>
          </p>

          <div v-show="isRotate" class="song-box">
            <div :class="i === indexPrev ? 'bg-grey': ''" class="song-label" v-for="(item, i) of songBox"
                 :key='i' @click="indexPrev = i">
              <i class="song-icon" :class="item.iconClass"></i>

              <div class="info">
                <p class="text-hidden">{{ item.title }}</p>
              </div>

              <div class="other">
                <!-- 收录歌曲数目-->
                <span>{{ item.number }} 首</span>

                <!-- 编辑名称，删除功能图标按钮   第一个标签不显示编辑和删除-->
                <span  v-if="i !== 0">
                  <i class="el-icon-edit-outline" @click.stop="edit(i)"></i>
                  <i class="el-icon-delete" @click.stop="deleted(i)"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 页面右侧-->
      <div class="right">
        <div class="rightc1">
          <i :class="songBox[indexPrev].iconClass" class="big"></i>

          <div class="rightc1-c1">
            <h5>
              <el-tag type="danger">歌单</el-tag>
              <span>{{ songBox[indexPrev].title }}</span>
            </h5>

            <div class="link">
              <router-link to="/user" tag="a">
                <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" width="40px" height="40px" alt="" />
              </router-link>

              <!-- 用户昵称 -->
              <el-link href="#/personal">{{ user.nickName }}</el-link>

              <!-- 歌单创建时间 -->
              <span>{{ songBox[indexPrev].time }} 创建</span>
            </div>

            <div class="fun">
              <el-button type="primary" size="small" class="el-icon-video-play"> 播放</el-button>
              <el-button type="primary" size="small" class="el-icon-star-off"> 收藏</el-button>
              <el-button type="primary" size="small" class="el-icon-download"> 下载</el-button>
              <el-button type="primary" size="small" class="el-icon-chat-dot-square"> 评论</el-button>
            </div>
          </div>

          <p>
            <strong>歌曲列表</strong>
            <span class="ml">0 首</span>
          </p>
        </div>

        <div class="rightc2">
          <i class="el-icon-s-promotion"></i>
          <strong>暂无音乐</strong>
          <p>
            <el-link href="#/list">发现音乐</el-link>
          </p>
        </div>
      </div>

      <!-- 对话框-->
      <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="30%">
        <el-form :model="form" @submit.native.prevent>
          <el-form-item label="歌单名称">
            <el-input v-model.trim="form.name" autocomplete="off" maxlength="30" show-word-limit></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogOk">确 定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import nlImg from '../public/img/我的音乐/img_1.jpeg';

export default {
  name: "music",

  beforeMount() {
    let defaultUserId = this.$cookies.get('defaultUserId');

    // 初始化用户对象
    this.user = this.$cookies.get(defaultUserId);
    // 初始化用户歌单
    this.songBox = this.user.songBox;
  },

  data () {
    return {
      // 未登录时显示的图片
      nlImg: nlImg,
      // 当特定元素变点击后赋予的类：旋转90deg
      isRotate: true,

      // 用户对象
      user: null,

      // 歌单
      songBox: [
        {
          iconClass: 'el-icon-headset', // icon图标
          title: '我喜欢的音乐', // 歌单名称
          number: 0, // 歌单中的歌数
          time: '2021-3-4'  // 歌单创建的时间
        }
      ],

      // song-label  自定义样式类
      isbgGrey: false,

      indexPrev: 0,
      // 对话框内容绑定信息数组
      form: {
        name: ''
      },

      // 控制对话框显示
      dialogFormVisible: false,

      dialogOk: this.create,
      dialogTitle: '新建歌单',
    }
  },
  methods: {
    // 转到登录页面
    goLogin () {
      window.location.href = 'http://localhost:3000/#/login';
    },

    // 获得当前日期
    getNowDate () {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      let nowDate = year + '-' + month + '-' + day;

      return nowDate;
    },

    // 新建歌单
    create () {
      // 获得用户输入的歌单名
      let title = this.form.name;

      if(title !== '') {
        // 查询是否与现有歌单重名
        let isRepeat = this.songBox.some( value => {
          return value.title === title;
        });

        if(isRepeat) {
          this.$message({
            showClose: true,
            message: '新歌单名与现有歌单名重复',
            type: 'warning',
            center: true
          });
        } else {
          // 获得当前日期
          let nowDate = this.getNowDate();

          // 创建新的歌单信息对象
          let obj = {
            iconClass: 'el-icon-star-off',
            title: title,
            number: 0,
            time: nowDate
          };

          // 将新的对象加入到数组中
          this.songBox.push(obj);
          // 更新用户对象
          this.user.songBox = this.songBox;
          // 保存更新后的用户对象
          this.$cookies.set('user', this.user);

          // 将对话框中输入框内容置空
          this.form.name = '';

          // 关闭对话框
          this.dialogFormVisible = false;
        }
      }
    },

    // 编辑歌单名
    edit (index) {
      this.$prompt('请输入新歌单名', '编辑歌单', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        // 新歌单名是否重复
        let isRepeat = false;

        if(value !== '') {
          for(let i = 0; i < this.songBox.length; i++) {
            if(this.songBox[i].title === value) {
              isRepeat = true;
            }
          }

          if(isRepeat) {
            this.$message({
              type: 'warning',
              message: '新歌单吗与现有歌单名重复'
            });
          } else {
            this.songBox[index].title = value;
            // 更新用户对象
            this.user.songBox = this.songBox;
            // 保存更新后的用户对象
            this.$cookies.set('user', this.user);
          }
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },

    // 删除 songBox 中指定项
    deleted (index) {
      this.songBox.splice(index, 1);
      this.indexPrev = 0;

      // 更新用户对象
      this.user.songBox = this.songBox;
      // 保存更新后的用户对象
      this.$cookies.set('user', this.user);
    },

  },

}
</script>

<style lang="less" scoped>
@import "../public/less/mymusic";
</style>